<style lang="scss">
.z-calendar {
  &__h {
    margin-right: 80px;
  }
  &__header {
    padding: 0 10px;
    box-shadow: 0px 2px 5px 0px rgba(111, 128, 146, 0.1);
    //&:after {
    //  content: '';
    //  height: 90px;
    //  display: block;
    //  box-shadow: 0px 2px 5px 0px rgba(111, 128, 146, 0.1);
    //}
  }
  &__abs {
    position: absolute;
    left: 0;
    width: 100%;
    bottom: 0;
    padding: 4px 10px;
    box-sizing: border-box;
  }
  &__btn {
    background-image: linear-gradient(#fff, #f3f3f3) !important;
    border: none !important;
    box-shadow: none;
    color: #000 !important;
  }
  &__title {
    font-size: 22px;
    color: #242424;
    line-height: 50px;
  }
  &__eid {
    font-size: 16px;
    line-height: 1;
  }
  &__eid-img {
    width: 14px;
    height: 14px;
    border-radius: 2px;
    margin-right: 10px;
    margin-left: 35px;
  }
  .z-calendar__cell-title {
    padding: 0 12px;
    box-sizing: border-box;
    height: 29px;
  }
  .el-calendar-table td.is-selected {
    background-color: transparent;
  }
  .el-calendar-table td.is-selected.is-today {

    color: #fff;
    .z-calendar__cell-title {
      background-color: #2B62FF;
      width: max-content;
      padding: 4px 12px;

    }
  }
  --calendar-date-border: 1px solid #eee;
  &__select {
    border: var(--calendar-date-border);
    align-items: stretch !important;
    border-radius: 4px;
    .el-button {
      height: 100%;
      padding: 0 10px;
      font-size: 16px;
    }
  }
  &__con {
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 0px 2px 5px 0px rgba(111, 128, 146, 0.1);
    thead {
      background-color: #fbfbfb;
    }
    th {
      border:1px solid #dfdfdf;

      border-bottom: none;
      &:not(:first-child) {
        border-left: none;
      }
    }
    th[data-selected] {
      color: #2B62FF;
    }
    td {
      border-color: #dfdfdf !important;

      position: relative;
    }
  }
  .el-date-editor {
    width: 70px;
    border-left: var(--calendar-date-border);
    border-right: var(--calendar-date-border);
    .el-icon-date {
      display: none;
    }
    .el-input__inner {
      padding: 0 10px;
      border: none;
    }
  }
  .el-calendar__body {
    padding: 0;
  }
  .el-calendar__header {
    display: none;
  }
  .el-calendar-table .el-calendar-day {
    box-sizing: border-box;
    padding: 8px;
    height: auto;
    min-height: 140px;
  }
  .z-calendar__event {
    font-size: 12px;
    //background: var(--el-color-primary);
    color: #313131;
    line-height: 1.5;
    padding-left: 5px;
    padding-right: 5px;
  }
  .el-calendar-table .el-calendar-day:hover {
    cursor: unset;
    background-color: transparent;
  }
  .el-calendar-table {
    td {
      cursor: pointer;
    }
    td:hover {
      background-color: #F2F8FE;
    }
  }
}
</style>

<template>
  <z-space class="z-calendar" row-gap="5px" vertical>
    <div class="z-calendar__header">
      <zw-layout

          style="justify-content: space-between; " center="crosAxis" row>
        <zw-layout row  class="z-calendar__title">
          <div class="z-calendar__h">&nbsp;{{currentDate}}份工作日历</div>
          <zw-layout style="align-items: center" row>
            <zw-layout  style="align-items: center"  class="z-calendar__eid" row v-for="eventId in eventIds">
              <div class="z-calendar__eid-img" :style="{background: `${eventId.color}`}">&nbsp;</div>
              <div>{{eventId.label}}</div>
            </zw-layout>
          </zw-layout>
        </zw-layout >
        <z-space class="z-calendar__select" column-gap="0px">
          <el-button
              class="z-calendar__btn"
              @click="setMonth(1)"><i class="el-icon-arrow-left"></i></el-button>
          <el-date-picker
              v-model="state.currentMonth"
              type="month"
              placeholder="选择日期"
              :clearable="false"
          >
          </el-date-picker>
          <el-button
              class="z-calendar__btn"
              @click="setMonth(-1)"><i class="el-icon-arrow-right"></i></el-button>
        </z-space>

      </zw-layout>
    </div>

    <ze-calendar
        class="z-calendar__con"
        :value="state.currentMonth" :range="range" :first-day-of-week="firstDayOfWeek">
      <template
          #dateCell="{date, data}">
        <div class="z-calendar__cell-con">
          <z-space vertical row-gap="6px" not-last>
            <div class="z-calendar__cell-title" :class="data.isSelected ? 'is-selected' : ''">
              {{ parseDay(data.day) }}号
            </div>
            <z-space class="z-calendar__events" row-gap="2px" vertical>
              <div class="z-calendar__event"
                   :style="{background: `${getColor(event)}`}"
                   v-for="event in o.getEvents(data.day)" :key="event.date">{{event.detail}}</div>
            </z-space>
          </z-space>
          <div class="z-calendar__abs">
            <zw-layout style="justify-content: flex-end" row>
              <z-space not-last>
                <img
                    v-if=" o.getEvents(data.day) &&  o.getEvents(data.day).length > 0"
                    @click="Z_EMIT('calendar-edit')"
                    src="">
                <img
                    @click="Z_EMIT('calendar-add')"
                    src="">
              </z-space>
            </zw-layout>
          </div>
        </div>
      </template>
    </ze-calendar>

  </z-space>
</template>

<script>
import {calendar} from "../../hooks/calendar";
import ZeCalendar from "../z-calendar-core/src/ZeCalendar";

globalThis.__zcalendar__lib = calendar

export default {
  name: 'ZCalendar',
  components: {ZeCalendar},
  props: {
    events: {
      type: Array,
      default() {
        return []
      }
    },
    range: {
      type: Array,
      default() {
        return []
      }
    },
    firstDayOfWeek: {
      type: Number,
      default: 1
    },
    eventIds: {
      type: Array,
      default() {
        return [
          {
            label: '当前日期',
            color: "#2B62FF",
            value: 'current'
          },
          {
            label: '已完成',
            color: '#BCDC89',
            value: 'done'
          },
          {
            label: '未完成',
            color: '#E0E0E0',
            value: 'fail'
          },
          {
            label: '进行中',
            color: '#F9C468',
            value: 'going'
          }
        ]
      }
    }
  },
  computed: {
    currentDate() {
      let obj = new ZY.Time.dayjs(this.state.currentMonth)
      // console.log(obj.year(), obj.month())
      return `${obj.year()}年${obj.month() + 1}月`
    }
  },
  methods: {
    parseDay(day) {
      let v = day.split('-').slice(2).join('-')
      if (v.startsWith('0') && v.length > 1) {
        return v.slice(1)
      }
      return v
    },
    getColor(event) {
      // console.log(event)
      let eventId = this.eventIds.find(v => v.value === event.type);
      if (eventId) {
        return eventId.color
      }
    }
  },
  setup(props) {
    let o = {
      getLunarDate(str) {
        let arr = str.split('-')
        // console.log(calendar.solar2lunar(arr[0],arr[1],arr[2]))
        return calendar.solar2lunar(arr[0],arr[1],arr[2]).IDayCn
      },
      getEvents(str) {
        let eventsData = props.events.filter(v => v.date === str)
        // console.log(eventsData)
        return eventsData
      }
    }

    // const {reactive} = vueCompositionAPI
    // console.log(new ZY.Time.dayjs())

    let obj =  new ZY.Time.dayjs()
    let state = ZY.T.state({
      curObj:  obj,
      currentMonth: obj.toDate()
    })

    function setMonth(num, type = 'month') {
      if (num === 'CURRENT') {
        state.currentMonth = new ZY.Time.dayjs().toDate()
      } else {
        state.currentMonth = new ZY.Time.dayjs(state.currentMonth).subtract(num, type).toDate()
      }
    }

    return {
      setMonth,
      o,
      state
    }
  }
}
</script>
